<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 5px solid red;
        padding: 10px;
    }

</style>
<body>

<div></div>
<script>
    // client -> 客户端, 使用client系列的相关属性来获取元素可视区的相关信息
    // 通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小

    var div = document.querySelector('div');

    // 返回元素上边框的大小 --> border
    console.log(`div.clientTop: ${div.clientTop}`)
    console.log(`div.clientLeft: ${div.clientLeft}`)

    // offsetWidth --> 宽度 + padding + border    --> 230
    // clientWidth --> 宽度 + padding             --> 220
    // clientWidth是不包含边框的值, 返回的数值不带单位
    console.log(`div.clientWidth: ${div.clientWidth}`)
    console.log(`div.offsetWidth: ${div.offsetWidth}`)
</script>
</body>
</html>
